<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
    <div class="fooddetail">
      <el-page-header @back="goBack" content="点评详情">
      </el-page-header>
      <div class="eidtbody">
        <p class="foodtitle-p mb-20">{{dayTime?dayTime:''}} 当日发布的菜品</p>
        <div class="fooddetail-list">
          <el-table
                  ref="multipleTable"
                  :data="arryList"
                  :stripe="tableoption.tableStripe"
                  :border="tableoption.tableBorder"
                  tooltip-effect="dark"
                  style="width: 100%"
                  header-cell-class-name="table-text-c"
                  cell-class-name="table-text-c">
            <el-table-column
                    label="当日展示图" align="center">
              <template slot-scope="scope">
                <div class="checkImgDialog width60 mg-auto"
                     :style="{backgroundImage:'url('+scope.row.pic+')',backgroundSize:'cover',backgroundPosition:'center'}"
                     @click="viewImgDialog(scope.$index)">
                  <div class="imgpreviewBody">
                    <div class="imgpreview">
                      <i class="el-icon-view"></i>
                    </div>
                  </div>
                </div>
                <p class="checkview">点击预览</p>
              </template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="菜品名称" align="center">
            </el-table-column>
            <el-table-column
                    prop="catName"
                    label="菜品类目" align="center">
            </el-table-column>
            <el-table-column
                    prop="goodNum"
                    label="好吃" align="center">
            </el-table-column>
            <el-table-column
                    prop="notGoodNum"
                    label="不好吃" align="center">
            </el-table-column>
            <el-table-column
                    label="当天好评率" align="center">
              <template slot-scope="scope">
                <span class="c-danger">{{scope.row.favorableRate}}%</span>
              </template>
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="150" align="center">
              <template slot-scope="scope">
                <el-button size="small" @click="showlist(scope.$index)">查看点评详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <drawerdetailBox :visible.sync="dialogDrawerVisible" :dishOption="dishOption" :releaseId="editId"></drawerdetailBox>
    <!--viewImgDialog.vue-->
    <viewImgDialog :privaImgObj="imgsrcCheck" :visible.sync="dialogImgVisible"></viewImgDialog>
  </div>
  </div>
</template>

<script>
  import drawerdetailBox from '@/components/dialog/drawerdetailBox.vue'
  import viewImgDialog from '@/components/dialog/previewImgDialog.vue'
  import {pagination, tableoption, yearDay} from '@/utils/util.js'
  import api from '@/utils/api.js'

  export default {
    components: {
      drawerdetailBox,
      viewImgDialog
    },
    data () {
      return {
        currentDate: new Date(),
        tableoption: tableoption,
        editId: this.$route.query.id,
        page: {
          pageindex: pagination.pageIndex,
          pagesize: pagination.pageSize,
          total: pagination.total
        },
        arryList: [],
        dialogDrawerVisible: false,
        dishOption: null,
        dayTime: '',
        // 预览
        imgsrcCheck: '',
        dialogImgVisible: false
      }
    },
    created () {
      this.InitFn()
    },
    methods: {
      // 初始化
      InitFn () {
        this.$fetch(api.release_detail, {
          id: this.editId
        }).then((response) => {
          if (response.code === 0) {
            for (let i in response.vo.dish) {
              let count = response.vo.dish[i].goodNum + response.vo.dish[i].notGoodNum
              let favorableRate = (response.vo.dish[i].goodNum / count).toFixed(2)
              let count_last = (favorableRate * 100).toFixed(2)
              if (count === 0) {
                count_last = 0
              }
              console.log('qq', count)
              response.vo.dish[i].favorableRate = count_last
            }
            this.dayTime = yearDay(response.vo.create_time)
            this.arryList = response.vo.dish
            console.log('list', this.arryList)
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      showlist (index) {
        this.dishOption = this.arryList[index]
        this.dialogDrawerVisible = true
      },
      goBack () {
        this.$router.go(-1)
      },
      viewImgDialog (index) {
        this.imgsrcCheck = this.arryList[index].pic
        this.dialogImgVisible = true
      }
    },
    mounted () {
    }
  }
</script>
